{% extends 'base_dashboard.html' %}
{% load site_tags %}

{% block title %}Admin Dashboard — Online LMS{% endblock %}

{% block extra_css %}
<style>
  /* ── Welcome Banner ───────────────────────────────────────────── */
  .admin-welcome {
    background: linear-gradient(135deg, #1a56db 0%, #0e3fa8 100%);
    border-radius: 1rem;
    padding: 1.75rem 2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
  }
  .admin-welcome::after {
    content: "";
    position: absolute;
    right: -40px; top: -40px;
    width: 220px; height: 220px;
    background: rgba(255,255,255,.07);
    border-radius: 50%;
  }
  .admin-welcome::before {
    content: "";
    position: absolute;
    right: 60px; bottom: -60px;
    width: 160px; height: 160px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
  }

  /* ── Stat Cards ───────────────────────────────────────────────── */
  .stat-card {
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,.10) !important;
  }
  .stat-card .stat-icon {
    width: 52px; height: 52px; border-radius: .75rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; flex-shrink: 0;
  }
  .stat-card .stat-number { font-size: 2rem; font-weight: 700; line-height: 1.1; }
  .stat-card .stat-label  { font-size: .78rem; color: #6b7280; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; margin-top: 2px; }
  .stat-card .stat-accent { height: 3px; }

  /* ── Quick-Action Cards ───────────────────────────────────────── */
  .qa-card {
    border: 1px solid #e5e7eb;
    border-radius: .875rem;
    padding: 1.25rem;
    text-decoration: none;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
    display: flex; align-items: center; gap: 1rem;
    background: #fff;
  }
  .qa-card:hover {
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(0,0,0,.09);
    transform: translateY(-2px);
  }
  .qa-card .qa-icon {
    width: 46px; height: 46px; border-radius: .625rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
  }
  .qa-card .qa-label { font-weight: 600; font-size: .875rem; color: #111827; }
  .qa-card .qa-sub   { font-size: .75rem; color: #9ca3af; }

  /* ── Table polish ─────────────────────────────────────────────── */
  .clean-table thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: #9ca3af; font-weight: 600; border-bottom: 1px solid #f3f4f6;
    padding-top: .85rem; padding-bottom: .85rem; background: #fafafa;
  }
  .clean-table tbody tr { transition: background .12s; }
  .clean-table tbody tr:hover { background: #f9fafb; }
  .clean-table tbody td { border-color: #f3f4f6; vertical-align: middle; font-size: .875rem; }
</style>
{% endblock %}

{% block content %}

<!-- ── Welcome Banner ─────────────────────────────────────────────── -->
<div class="admin-welcome shadow-sm">
  <div class="d-flex align-items-center justify-content-between flex-wrap gap-3" style="position:relative;z-index:1;">
    <div>
      <p class="mb-1" style="font-size:.8rem;opacity:.7;text-transform:uppercase;letter-spacing:.08em;">
        <i class="bi bi-grid-1x2-fill me-1"></i>Admin Panel
      </p>
      <h3 class="fw-bold mb-1">Welcome back, {{ request.user.get_display_name }}</h3>
      <p class="mb-0" style="opacity:.8;font-size:.9rem;">
        Here's what's happening on your platform today.
      </p>
    </div>
    <div class="text-end">
      <div style="font-size:.78rem;opacity:.65;">{% now "l, F j, Y" %}</div>
      <div class="d-flex flex-wrap gap-2 justify-content-end mt-2">
        <a href="{% url 'dashboard:admin_guide' %}" target="_blank"
           class="btn btn-outline-light btn-sm fw-semibold">
          <i class="bi bi-book me-1"></i>Admin Guide
        </a>
        {% if pending_enrollments > 0 %}
        <a href="{% url 'enrollments:enrollment_review' %}?status=pending"
           class="btn btn-light btn-sm fw-semibold" style="color:#1a56db;">
          <i class="bi bi-bell-fill me-1 text-warning"></i>
          {{ pending_enrollments }} Pending Review
        </a>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- ── Stat Cards ─────────────────────────────────────────────────── -->
<div class="row g-3 mb-4">
  <!-- Students -->
  <div class="col-6 col-xl-3">
    <div class="card stat-card shadow-sm">
      <div class="stat-accent bg-primary"></div>
      <div class="card-body p-4">
        <div class="d-flex align-items-center gap-3 mb-3">
          <div class="stat-icon bg-primary bg-opacity-10">
            <i class="bi bi-people-fill text-primary"></i>
          </div>
          <div class="flex-grow-1"></div>
          <a href="{% url 'dashboard:manage_users' %}?role=student"
             class="text-muted" style="font-size:.7rem;text-decoration:none;">View →</a>
        </div>
        <div class="stat-number text-dark">{{ total_students }}</div>
        <div class="stat-label">Total Students</div>
      </div>
    </div>
  </div>
  <!-- Teachers -->
  <div class="col-6 col-xl-3">
    <div class="card stat-card shadow-sm">
      <div class="stat-accent bg-success"></div>
      <div class="card-body p-4">
        <div class="d-flex align-items-center gap-3 mb-3">
          <div class="stat-icon bg-success bg-opacity-10">
            <i class="bi bi-person-badge-fill text-success"></i>
          </div>
          <div class="flex-grow-1"></div>
          <a href="{% url 'dashboard:manage_users' %}?role=teacher"
             class="text-muted" style="font-size:.7rem;text-decoration:none;">View →</a>
        </div>
        <div class="stat-number text-dark">{{ total_teachers }}</div>
        <div class="stat-label">Total Teachers</div>
      </div>
    </div>
  </div>
  <!-- Courses -->
  <div class="col-6 col-xl-3">
    <div class="card stat-card shadow-sm">
      <div class="stat-accent" style="background:#0ea5e9;"></div>
      <div class="card-body p-4">
        <div class="d-flex align-items-center gap-3 mb-3">
          <div class="stat-icon" style="background:rgba(14,165,233,.12);">
            <i class="bi bi-collection-fill" style="color:#0ea5e9;"></i>
          </div>
          <div class="flex-grow-1"></div>
          <a href="{% url 'dashboard:manage_courses' %}"
             class="text-muted" style="font-size:.7rem;text-decoration:none;">View →</a>
        </div>
        <div class="stat-number text-dark">{{ published_courses }}<span class="fs-5 fw-normal text-muted">/{{ total_courses }}</span></div>
        <div class="stat-label">Published / Total Courses</div>
      </div>
    </div>
  </div>
  <!-- Pending Enrollments -->
  <div class="col-6 col-xl-3">
    <div class="card stat-card shadow-sm">
      <div class="stat-accent bg-warning"></div>
      <div class="card-body p-4">
        <div class="d-flex align-items-center gap-3 mb-3">
          <div class="stat-icon bg-warning bg-opacity-10">
            <i class="bi bi-hourglass-split text-warning"></i>
          </div>
          <div class="flex-grow-1"></div>
          <a href="{% url 'enrollments:enrollment_review' %}?status=pending"
             class="text-muted" style="font-size:.7rem;text-decoration:none;">Review →</a>
        </div>
        <div class="stat-number text-dark">{{ pending_enrollments }}</div>
        <div class="stat-label">Pending Enrollments</div>
      </div>
    </div>
  </div>
</div>

<!-- ── Quick Actions ──────────────────────────────────────────────── -->
<div class="card border-0 shadow-sm rounded-4 mb-4">
  <div class="card-body p-4">
    <h6 class="fw-bold text-uppercase text-muted mb-3" style="font-size:.72rem;letter-spacing:.08em;">
      <i class="bi bi-lightning-charge-fill text-warning me-1"></i>Quick Actions
    </h6>
    <div class="row g-3">
      <div class="col-sm-6 col-lg-3">
        <a href="{% url 'enrollments:enrollment_review' %}?status=pending" class="qa-card">
          <div class="qa-icon bg-warning bg-opacity-15">
            <i class="bi bi-clipboard-check-fill text-warning"></i>
          </div>
          <div>
            <div class="qa-label">Review Enrollments</div>
            <div class="qa-sub">{{ pending_enrollments }} pending</div>
          </div>
        </a>
      </div>
      <div class="col-sm-6 col-lg-3">
        <a href="{% url 'dashboard:manage_users' %}" class="qa-card">
          <div class="qa-icon bg-primary bg-opacity-10">
            <i class="bi bi-people-fill text-primary"></i>
          </div>
          <div>
            <div class="qa-label">Manage Users</div>
            <div class="qa-sub">Students &amp; Teachers</div>
          </div>
        </a>
      </div>
      <div class="col-sm-6 col-lg-3">
        <a href="{% url 'dashboard:manage_courses' %}" class="qa-card">
          <div class="qa-icon bg-success bg-opacity-10">
            <i class="bi bi-collection-fill text-success"></i>
          </div>
          <div>
            <div class="qa-label">Manage Courses</div>
            <div class="qa-sub">{{ total_courses }} total courses</div>
          </div>
        </a>
      </div>
      <div class="col-sm-6 col-lg-3">
        <a href="/admin/" class="qa-card">
          <div class="qa-icon bg-dark bg-opacity-10">
            <i class="bi bi-gear-fill text-dark"></i>
          </div>
          <div>
            <div class="qa-label">Django Admin</div>
            <div class="qa-sub">Advanced settings</div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

<!-- ── Bottom Row ─────────────────────────────────────────────────── -->
<div class="row g-4">

  <!-- Recent Enrollments -->
  <div class="col-lg-8">
    <div class="card border-0 shadow-sm rounded-4 h-100">
      <div class="card-header bg-white rounded-top-4 border-0 d-flex justify-content-between align-items-center px-4 pt-4 pb-2">
        <div>
          <h5 class="fw-bold mb-0">Recent Enrollments</h5>
          <p class="text-muted small mb-0">Latest student enrollment activity</p>
        </div>
        <a href="{% url 'enrollments:enrollment_review' %}" class="btn btn-outline-primary btn-sm rounded-pill px-3">View All</a>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table clean-table mb-0">
            <thead>
              <tr>
                <th class="ps-4" style="width:35%">Student</th>
                <th>Course</th>
                <th>Status</th>
                <th class="pe-4">Date</th>
              </tr>
            </thead>
            <tbody>
              {% for enrollment in recent_enrollments %}
              <tr>
                <td class="ps-4">
                  <div class="d-flex align-items-center gap-2">
                    <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                         style="width:32px;height:32px;">
                      <i class="bi bi-person-fill text-primary" style="font-size:.75rem;"></i>
                    </div>
                    <div>
                      <div class="fw-medium" style="font-size:.85rem;">{{ enrollment.student.get_display_name }}</div>
                      <div class="text-muted" style="font-size:.73rem;">@{{ enrollment.student.username }}</div>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="text-dark" style="font-size:.85rem;">{{ enrollment.course.title|truncatechars:32 }}</div>
                  <div class="text-muted" style="font-size:.73rem;">{% format_price enrollment.course.price %}</div>
                </td>
                <td>
                  {% if enrollment.status == 'approved' %}
                    <span class="badge rounded-pill" style="background:#dcfce7;color:#15803d;font-size:.72rem;">
                      <i class="bi bi-check-circle me-1"></i>Approved
                    </span>
                  {% elif enrollment.status == 'pending' %}
                    <span class="badge rounded-pill" style="background:#fef3c7;color:#92400e;font-size:.72rem;">
                      <i class="bi bi-clock me-1"></i>Pending
                    </span>
                  {% else %}
                    <span class="badge rounded-pill" style="background:#fee2e2;color:#b91c1c;font-size:.72rem;">
                      <i class="bi bi-x-circle me-1"></i>Rejected
                    </span>
                  {% endif %}
                </td>
                <td class="pe-4">
                  <span class="text-muted" style="font-size:.78rem;">{{ enrollment.requested_at|date:"M d, Y" }}</span>
                </td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="4" class="text-center py-5">
                  <i class="bi bi-inbox text-muted" style="font-size:2.5rem;opacity:.3;"></i>
                  <p class="text-muted small mt-2 mb-0">No enrollments yet.</p>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Recent Users -->
  <div class="col-lg-4">
    <div class="card border-0 shadow-sm rounded-4 h-100">
      <div class="card-header bg-white rounded-top-4 border-0 d-flex justify-content-between align-items-center px-4 pt-4 pb-2">
        <div>
          <h5 class="fw-bold mb-0">Recent Users</h5>
          <p class="text-muted small mb-0">Newest registrations</p>
        </div>
        <a href="{% url 'dashboard:manage_users' %}" class="btn btn-outline-primary btn-sm rounded-pill px-3">View All</a>
      </div>
      <div class="card-body px-4 pt-3 pb-3">
        {% for user in recent_users %}
        <div class="d-flex align-items-center gap-3 py-2 {% if not forloop.last %}border-bottom{% endif %}">
          {% if user.profile_picture %}
            <img src="{{ user.profile_picture.url }}" class="rounded-circle flex-shrink-0"
                 width="38" height="38" style="object-fit:cover;" alt="">
          {% else %}
            <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0
              {% if user.role == 'admin' %}bg-danger{% elif user.role == 'teacher' %}bg-success{% else %}bg-primary{% endif %}
              bg-opacity-15"
              style="width:38px;height:38px;">
              <i class="bi bi-person-fill
                {% if user.role == 'admin' %}text-danger{% elif user.role == 'teacher' %}text-success{% else %}text-primary{% endif %}"
                style="font-size:.85rem;"></i>
            </div>
          {% endif %}
          <div class="flex-grow-1 overflow-hidden">
            <div class="fw-semibold text-truncate" style="font-size:.85rem;">{{ user.get_display_name }}</div>
            <div style="font-size:.72rem;">
              <span class="badge rounded-pill px-2
                {% if user.role == 'admin' %}bg-danger{% elif user.role == 'teacher' %}bg-success{% else %}bg-primary{% endif %}
                bg-opacity-15
                {% if user.role == 'admin' %}text-danger{% elif user.role == 'teacher' %}text-success{% else %}text-primary{% endif %}"
                style="font-size:.68rem;">{{ user.get_role_display }}</span>
            </div>
          </div>
          <div class="text-end flex-shrink-0">
            <small class="text-muted d-block" style="font-size:.72rem;">{{ user.date_joined|date:"M d" }}</small>
          </div>
        </div>
        {% empty %}
        <div class="text-center py-5">
          <i class="bi bi-people text-muted" style="font-size:2rem;opacity:.3;"></i>
          <p class="text-muted small mt-2 mb-0">No users yet.</p>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

</div>
{% endblock %}